<template>
  <div class="app-container">
    <dv-border-box-11 title="年龄变化">
      <div style="padding: 60px 60px 100px;">
        <dv-decoration-10 style="width:100%;height:40px;"/>
        <h1>核心能力</h1>
        用户上传一张人脸图片，基于人脸编辑与生成算法，输出一张人脸变老或变年轻的图片，支持实现人脸不同年龄的变化。
        <el-row>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="text-align:center;margin: 20px;padding: 20px;height: 650px">
                <image-identify-oss @input="getUrlList"></image-identify-oss>
                <div v-for="(item, index) in form.ageInfos" :key="index" style="display: flex;margin: 10px">
                  <el-input v-model="form.ageInfos[index-1].age" :placeholder="'请输入第' + ++index + '个年龄'"/>
                  <el-button
                    style="margin-left: 10px"
                    type="success"
                    icon="el-icon-plus"
                    plain
                    @click="addInput"
                  ></el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-minus"
                    plain
                    @click="deleteInput"
                  ></el-button>
                </div>
                <el-input placeholder="请输入在线图片url（上传图片和输入url二选一）" v-model="form.url" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="searchChangeAgePic"></el-button>
                </el-input>
              </div>
            </dv-border-box-9>
          </el-col>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="height: 650px;margin: 20px;padding: 20px">
                <el-collapse v-model="collapse" accordion>
                  <el-collapse-item title="识别结果" name="1">
                    <div >
                    <el-image :src="responseData.resultUrl" :preview-src-list="responseData.resultUrlList" style="width: 200px; height: 200px"></el-image>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="Request" name="2">
                    <json-viewer :value="form" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                  </el-collapse-item>
                  <el-collapse-item title="Response" name="3">
                    <json-viewer :value="responseData" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </dv-border-box-9>
          </el-col>
        </el-row>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import {changeAgePic} from "@/api/txcloud/face/facechange";

export default {
  components: {
    JsonViewer
  },
  data() {
    return {
      collapse: '0',
      form: {
        rspImgType: 'url',
        ageInfos: [{age: ""}],
      },
      responseData: {
        resultUrlList:[]
      },
    };
  },
  created() {
  },
  methods: {
    searchChangeAgePic() {
      changeAgePic(this.form).then(res => {
          if (res.code === 200) {
            this.responseData = res.data
            let a= []
            a.push(res.data.resultUrl)
            this.responseData.resultUrlList =a
            this.collapse = '1'
            this.$modal.msgSuccess(res.msg);
          } else {
            this.responseData.hasText = "false"
            this.$modal.msgError(res.msg);
          }
        }
      )
    },
    getUrlList(val) {
      this.form.imageUrl = val
    },
    getImageBase64(val) {
      this.form.image = val
    },
    addInput() {
      if (this.form.ageInfos.length >= 3) {
        this.$modal.msgWarning("最多输入三个年龄");
      } else {
        this.form.ageInfos.push({age: ""});
      }
    },
    deleteInput() {
      if (this.form.ageInfos.length <= 1) {
        this.$modal.msgWarning("最少输入一个年龄");
      } else {
        this.form.ageInfos.pop();
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: #fff;

  .el-select {
    width: 10vw;
  }
}
</style>
